<template>
  <div id="companyYear"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "CompanyYearEchart",
  data() {
    return {
      colorTypes: [
        {
          name: "独角兽",
          infoname: "unironinfo",
          color: "#ef0000",
        },
        {
          infoname: "gazelleInfo",
          name: "瞪羚",
          color: "#ecf000",
        },
        {
          infoname: "subUnironinfo",
          name: "种子独角兽",
          color: "#00ef00",
        },
        {
          infoname: "subGazelleInfo",
          name: "潜在瞪羚",
          color: "#0000ef",
        },
      ],
      dataSet: [
        {
          id: "unironinfo",
          source: this.unironinfo,
        },
        {
          id: "gazelleInfo",
          source: this.gazelleInfo,
        },
        {
          id: "subUnironinfo",
          source: this.subUnironinfo,
        },
        {
          id: "subGazelleInfo",
          source: this.subGazelleInfo,
        },
      ],
      unironinfo: [
        { year: 2015, value: 0 },
        { year: 2016, value: 5 },
        { year: 2017, value: 8 },
        { year: 2018, value: 32 },
        { year: 2019, value: 25 },
        { year: 2020, value: 18 },
      ],
      gazelleInfo: [
        { year: 2015, value: 0 },
        { year: 2016, value: 10 },
        { year: 2017, value: 28 },
        { year: 2018, value: 2 },
        { year: 2019, value: 35 },
        { year: 2020, value: 30 },
      ],
      subUnironinfo: [
        { year: 2015, value: 4 },
        { year: 2016, value: 6 },
        { year: 2017, value: 12 },
        { year: 2018, value: 22 },
        { year: 2019, value: 15 },
        { year: 2020, value: 8 },
      ],
      subGazelleInfo: [
        { year: 2015, value: 14 },
        { year: 2016, value: 26 },
        { year: 2017, value: 2 },
        { year: 2018, value: 23 },
        { year: 2019, value: 18 },
        { year: 2020, value: 12 },
      ],
      formatterStr: "",
    };
  },
  computed:{
    // infoFamtter(){
    //   return (params)=>{
    //     let str = `<div>params[0]['axisValue']</div>`
    //     for (let index = 0; index < params.length; index++) {
    //       const element = params[index];
    //       str += 
    //       str += `<div>
    //         <span style="display:inline-block; width:10px; height: 2px; background-color: ${colorTypes[index]['color']}"></span>
    //         ${element.seriesName}: ${element.data.value}
    //       </div>`
    //     }
    //   }
    // }
  },
  mounted() {
    this.initComYear();
  },
  methods: {
     infoFamtter(params){
        let str = `<div>${params[0]['axisValue']}</div>`
        for (let index = 0; index < params.length; index++) {
          const element = params[index];
          str += `<div>
            <span style="display:inline-block; width:10px; height: 2px; background-color: ${this.colorTypes[index]['color']}"></span>
            ${element.seriesName}: ${element.data.value}
          </div>`
        }
        return str
      },
    initComYear() {
      let myChart = echarts.init(document.getElementById("companyYear"), null, {
        width: 380,
        height: 360,
      });
      let that = this;
      let option = {
        dataset: [
          {
            id: "unironinfo",
            source: this.unironinfo,
          },
          {
            id: "gazelleInfo",
            source: this.gazelleInfo,
          },
          {
            id: "subUnironinfo",
            source: this.subUnironinfo,
          },
          {
            id: "subGazelleInfo",
            source: this.subGazelleInfo,
          },
        ],
        title: {
          text: "江西瞪羚/独角兽企业榜单历年变化趋势",
          left: "left",
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.4)",
          textStyle: {
            color: "#fff",
          },
          borderWidth: 0,
          formatter: (params) => {
            return that.infoFamtter(params);
          },
        },
        legend: {
          orient: "horizontal",
          top: "bottom",
        },
        xAxis: {
          type: "category",
          nameLocation: "middle",
          splitLine: { show: true },
        },
        yAxis: {
          splitLine: { show: true },
        },
        series: [
          {
            datasetId: "unironinfo",
            name: "独角兽",
            type: "line",
            smooth: true,
            lineStyle: {
              color: that.colorTypes[0]["color"],
            },
          },
          {
            datasetId: "gazelleInfo",
            name: "瞪羚",
            type: "line",
            smooth: true,
            lineStyle: {
              color: that.colorTypes[1]["color"],
            },
          },
          {
            datasetId: "subUnironinfo",
            name: "种子独角兽",
            type: "line",
            smooth: true,
            lineStyle: {
              color: that.colorTypes[2]["color"],
            },
          },
          {
            datasetId: "subGazelleInfo",
            name: "潜在瞪羚",
            type: "line",
            smooth: true,
            lineStyle: {
              color: that.colorTypes[3]["color"],
            },
          },
        ],
      };

      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<style>
</style>